<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="catbox">
    <table id="cartTable">
        <thead>
        <tr>
            <th><label>
                <input class="check-all check" type="checkbox"/>&nbsp;&nbsp;全选</label></th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody">


        </tbody>
    </table>
    <div class="foot" id="foot">
        <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;&nbsp;全选</label>
        <a class="fl " id="deleteAll" href="javascript:;">删除</a>
        <div class="fr closing" onclick="getTotal();">结 算</div>
        <input type="hidden" id="cartTotalPrice"/>
        <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
        <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                class="arrow up">︽</span><span class="arrow down">︾</span></div>
        <div class="selected-view">
            <div id="selectedViewList" class="clearfix">
                <div><img src="images/1.jpg"><span>取消选择</span></div>
            </div>
            <span class="arrow">◆<span>◆</span></span></div>
    </div>
</div>
</body>
<script src="js/dom.js"></script>
<script src="js/cookie.js"></script>
<script>

    var tboby = document.getElementById("tbody");
    var cookie = document.cookie;//获取所有的cookie
    //"goodsid_A0001=A0001; goodsname_A0001=测试数据; goodsprice_A0001=100; goodsimg_A0001=images/1.jpg; goodsnum_A0001=12; goodsid_A0002=A0002; goodsname_A0002=测试2; goodsnum_A0002=100; goodsprice_A0002=1; goodsimg_A0002=images/1.jpg"
    if (cookie) {
        var cookieList = cookie.split("; ");///获取所有的cookie
        var newList = cookieList.filter(function (cookie) {
            return cookie.indexOf("goodsid_") == 0;
        })

        var html = "";
        newList.map(function (cookie) {
            var goodsid = cookie.split("=")[1];
            var goodsname = getCookie("goodsname_" + goodsid);
            var goodsnum = getCookie("goodsnum_" + goodsid);
            var goodsprice = getCookie("goodsprice_" + goodsid);
            var goodsimg = getCookie("goodsimg_" + goodsid);
            html += `
         <tr>
        <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
        <td class="goods"><img src="${goodsimg}" alt=""/><span>${goodsname}</span></td>
        <td class="price">${(goodsprice * 1).toFixed(2)}</td>
        <td class="count"><span class="reduce" data-goodsid="${goodsid}">${goodsnum > 1 ? "-" : ""}</span>
        <input class="count-input" type="text" value="${goodsnum}"/>
        <span class="add" data-goodsid="${goodsid}">+</span></td>
        <td class="subtotal">${(goodsprice * goodsnum).toFixed(2)}</td>
        <td class="operation"><span class="delete" data-goodsid="${goodsid}">删除</span></td>
        </tr>
            `;
        })
        tboby.innerHTML = html;


    }


    //加法  数量+1  减号显示    小计更新
    var addList = document.getElementsByClassName("add");
    for (var i = 0; i < addList.length; i++) {
        addList[i].onclick = function () {
            var countInput = prev(this);
            countInput.value = countInput.value * 1 + 1; //数量的更新

            var reduceSpan = prev(countInput); //找到减号的span
            reduceSpan.innerHTML = "-";

            var parent = this.parentNode;
            var priceTd = prev(parent);//找到单价的td
            var price = priceTd.innerHTML//找到单价

            var subtotalTd = next(parent);//找到小计的td
            subtotalTd.innerHTML = (price * countInput.value).toFixed(2);
            setTotal();

            var goodsid = this.getAttribute("data-goodsid");
            setCookie("goodsnum_" + goodsid, countInput.value, 7);

        }
    }

    var reduceList = document.getElementsByClassName("reduce");//找到所有减号的集合
    for (var i = 0; i < reduceList.length; i++) {
        var reduce = reduceList[i];//找到每一个减号
        reduce.onclick = function () {
            var countInput = next(this);
            if (countInput.value == 1) {
                return false;
            }//点之前的判断
            countInput.value = countInput.value - 1;
            if (countInput.value == 1) {
                this.innerHTML = "";
            }
            var parent = this.parentNode;
            var priceTd = prev(parent);//找到单价的td
            var price = priceTd.innerHTML//找到单价
            var subtotalTd = next(parent);//找到小计的td
            subtotalTd.innerHTML = (price * countInput.value).toFixed(2);
            setTotal();
            var goodsid = this.getAttribute("data-goodsid");
            setCookie("goodsnum_" + goodsid, countInput.value, 7);
        }
    }

    //全选
    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");
    var count = 0;
    var sumCount = checkOneList.length;

    checkAll.onclick = function () {
        for (var i = 0; i < checkOneList.length; i++) {
            checkOneList[i].checked = this.checked;
        }
        this.checked ? count = sumCount : count = 0;
        setTotal();
    }
    for (var i = 0; i < checkOneList.length; i++) {
        checkOneList[i].onclick = function () {
            if (this.checked) {
                count++;
            } else {
                count--;
            }

            if (count == sumCount) {
                checkAll.checked = true;
            } else {
                checkAll.checked = false;
            }
            setTotal();
        }
    }

    function setTotal() {
        var total = 0;//数量的统计
        var priceTotal = 0; //价格汇总的统计
        for (var i = 0; i < checkOneList.length; i++) {
            if (checkOneList[i].checked) {
                var tr = checkOneList[i].parentNode.parentNode;//找到tr
                var countInput = tr.getElementsByClassName("count-input")[0];
                var subtotalTd = tr.getElementsByClassName("subtotal")[0];

                total += countInput.value * 1;
                priceTotal += subtotalTd.innerHTML * 1;

            }
        }
        var totalSpan = document.getElementById("selectedTotal");
        totalSpan.innerHTML = total;
        var priceTotalSpan = document.getElementById("priceTotal");
        priceTotalSpan.innerHTML = priceTotal.toFixed(2);

    }

    var deleteList = document.getElementsByClassName("delete");
    for (var i = 0; i < deleteList.length; i++) {
        deleteList[i].onclick = function () {
            var tr = this.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
            setTotal();
            var goodsid = this.getAttribute("data-goodsid");
            setCookie("goodsid_" + goodsid, goodsid, -7);
            setCookie("goodsname_" + goodsid, "", -7);
            setCookie("goodsnum_" + goodsid, "", -7);
            setCookie("goodsprice_" + goodsid, "", -7);
            setCookie("goodsimg_" + goodsid, "", -7);
        }
    }

</script>
</html>